<template>
  <view class="data-summary-page page-content">
    <!-- 刷新下拉 -->
    <z-paging ref="paging" v-model="refreshData" @query="handleRefresh" :auto="true" :refresher-enabled="true" :paging-enabled="false">
    <up-navbar title="数据汇总1" :autoBack="true" :fixed="true" bgColor="transparent" :border="false" placeholder/>
      
      <!-- 待处理数据模块 -->
      <PendingDataStats ref="pendingDataRef" @refresh="handlePendingDataRefresh" @detail="handleDetailClick" />

      <!-- 待签人员模块 -->
      <PendingSignStats ref="pendingSignRef" @refresh="handlePendingSignRefresh" @detail="handleSignDetailClick" />

    </z-paging>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import PendingDataStats from './components/PendingDataStats.vue'
import PendingSignStats from './components/PendingSignStats.vue'

const paging = ref(null)
const refreshData = ref([])
const pendingDataRef = ref(null)
const pendingSignRef = ref(null)
let autoRefreshTimer = null

// 处理待处理数据组件刷新
const handlePendingDataRefresh = () => {
  console.log('待处理数据已刷新')
}

// 处理待签人员组件刷新
const handlePendingSignRefresh = () => {
  console.log('待签人员数据已刷新')
}

// 处理详情页面跳转
const handleDetailClick = (type, data) => {
  console.log('跳转详情页面:', type, data)
  switch (type) {
    case 'abnormal':
      uni.navigateTo({ url: '/pages/abnormal-orders/detail' })
      break
    case 'register':
      uni.navigateTo({ url: '/pages/register-pending/detail' })
      break
    case 'verify':
      uni.navigateTo({ url: '/pages/verify-pending/detail' })
      break
  }
}

// 处理待签人员详情跳转
const handleSignDetailClick = (data) => {
  console.log('跳转待签人员详情:', data)
  uni.navigateTo({ 
    url: '/pages/pending-sign/detail',
    success: function(res) {
      // 可以通过 eventChannel 传递数据
      res.eventChannel.emit('acceptDataFromOpenerPage', { data })
    }
  })
}

// 处理主页面刷新
const handleRefresh = async () => {
  try {
    // 刷新子组件数据
    if (pendingDataRef.value) {
      await pendingDataRef.value.refreshData()
    }
    if (pendingSignRef.value) {
      await pendingSignRef.value.refreshData()
    }
    paging.value?.complete()
  } catch (error) {
    console.error('刷新失败:', error)
    paging.value?.complete()
  }
}

// 自动刷新
const startAutoRefresh = () => {
  autoRefreshTimer = setInterval(() => {
    // 自动刷新数据
    if (pendingDataRef.value) {
      pendingDataRef.value.refreshData()
    }
    if (pendingSignRef.value) {
      pendingSignRef.value.refreshData()
    }
  }, 60000) // 60秒刷新一次
}

// 停止自动刷新
const stopAutoRefresh = () => {
  if (autoRefreshTimer) {
    clearInterval(autoRefreshTimer)
    autoRefreshTimer = null
  }
}

onMounted(() => {
  startAutoRefresh()
})

onUnmounted(() => {
  stopAutoRefresh()
})
</script>

<style lang="scss" scoped>
.data-summary-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding: 0 20rpx;
  animation: fadeInUp 0.6s ease-out;
}

/* 动画定义 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式布局 */
@media (max-width: 480px) {
  .data-summary-page {
    padding: 0 12rpx;
  }
}

@media (max-width: 375px) {
  .data-summary-page {
    padding: 0 10rpx;
  }
}

/* 平板适配 */
@media (min-width: 768px) {
  .data-summary-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 40rpx;
  }
}

/* 大屏适配 */
@media (min-width: 1024px) {
  .data-summary-page {
    max-width: 800px;
    padding: 0 48rpx;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .data-summary-page {
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .data-summary-page {
    animation: none;
  }
}
</style>